<template>
    <van-sticky>
        <van-nav-bar
            title="确认拼团"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        > 
        </van-nav-bar>
    </van-sticky>

    <van-contact-card type="add" @click="ToAddress" v-if="JSON.stringify(addressDefault) === '{}'"  />
    <van-contact-card type="edit" :tel="addressDefault.mobile" :name="`${addressDefault.consignee} ${addressDefault.region_text}`" @click="ToAddress" v-else />

    <van-card
        :num="num"
        :title="product.name"
    >
        <template #thumb>
            <van-image
                width="88"
                height="88"
                fit="cover"
                :src="product.thumb_cdn"
            />
        </template>

        <template #price>
            <div>
                拼团价格：{{ product.team }}
            </div>
        </template>
        <template #tags>
            <van-tag plain type="danger" v-if="attrs.length <= 0">无商品规格</van-tag>
            <div v-else>
                <van-tag plain type="primary" v-for="attr in attrs">{{ attr.value }} ￥{{ attr.price }}</van-tag>
            </div>
        </template>
    </van-card>

    <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />

    <van-popup v-model:show="PayShow" round position="bottom">
        <van-picker
            title="选择支付方式"
            :columns="PayList"
            @cancel="PayShow = false"
            @confirm="onPayConfirm"
        />
    </van-popup>

    <!--订单备注 -->
    <van-field 
        v-model="remark"
        rows="2"
        autosize
        label="订单备注"
        type="textarea"
        maxlength="120"
        placeholder="请输入订单备注"
        show-word-limit
    />

    <!-- 提交动作栏 -->
    <van-submit-bar text-align="left" :price="total" button-text="确认支付" @submit="onSubmit" />

</template>

<script setup>
const { proxy } = getCurrentInstance();

onBeforeMount(() => {

    getTeamInfo();

    // 获取当前用户选择的收货地址
    let address = proxy.$cookies.get('address');

    if(address)
    {
        addressDefault.value = {
            id:address.id,
            consignee:address.name,
            mobile:address.tel,
            region_text:address.address
        };
    }else{
        getAddressDefaultInfo();
    }
})

const addressDefault = ref({});

const business = ref(proxy.$business.value ?? {});
const proid = ref(proxy.$route.query.proid ?? 0);
const teamid = ref(proxy.$cookies.get('teamid') ?? 0);
const relationids = ref(proxy.$cookies.get('relationids') ?? 0);
const num = ref(proxy.$cookies.get('num') ?? 0);
const product = ref({});
const attrs = ref([]);
const PayShow = ref(false);
const PayList = ref([
    {text:'余额支付',value:'money'},
    {text:'支付宝支付',value:'zfb'},
    {text:'微信支付',value:'wx'}
])
const PayActive = ref(PayList.value[0]);

const remark = ref('');

const total = computed(() => {
    let total = 0;

    if(product.value.team)
    {
        total += parseFloat(product.value.team);
    }

    if(attrs.value.length > 0)
    {
        attrs.value.map(item => total += parseFloat(item.price))
    }

    total = parseInt(num.value) * parseFloat(total);

    return total * 100;
})

const onSubmit = async () => {
    
}

const getTeamInfo = async () => {
    let params = {
        busid:business.value.id,
        teamid:teamid.value,
        relationids:relationids.value
    }

    let result = await proxy.$post({
        url:'/product/team/confirm',
        params
    })

    if(result.code === 1)
    {
        product.value = result.data.product;
        attrs.value = result.data.relation
    }
}

onBeforeUnmount(() => {
    proxy.$cookies.remove('address');
})

const onPayConfirm = ({selectedOptions}) => {
    PayActive.value = selectedOptions[0];

    PayShow.value = false;
}

const ToAddress = () => {
    proxy.$router.push({path:'/business/address/index',query:{action:'order'}})
}

const getAddressDefaultInfo = async () => {
    let params = {
        busid:proxy.$business.value.id
    }

    let result = await proxy.$post({
        url:'/product/order/address',
        params
    })

    if(result.code === 1)
    {
        addressDefault.value = result.data;

        return false;
    }
}

const onBack = () => proxy.$router.back();
</script>